<template>
  <div>
    <!-- 二级占位符 -->
    <router-view />

    <!-- 底部标签栏 -->
    <van-tabbar v-model="active" change safe-area-inset-bottom>
      <van-tabbar-item icon="wap-home" to="/index">首页</van-tabbar-item>
      <van-tabbar-item icon="label" to="/realtimeinfo">资讯</van-tabbar-item>
      <van-tabbar-item icon="coupon" to="/activity">活动</van-tabbar-item>
      <van-tabbar-item icon="manager" to="/personalcenter">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        active:'0',
      };
    },
    methods: {
      name() {
        
      }
    },
    mounted(){
      // 解决刷新后，tabbar高亮按钮始终显示在第一个上
      // window.location.pathname获取地址栏中的路径
      switch( window.location.pathname){
        case '/index' :  this.active = 0;break;
        case '/realtimeinfo' :  this.active = 1;break;
        case '/activity' :  this.active = 2;break;
        case '/personalcenter' :  this.active = 3;break;
        default : this.active = 0;
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>